iT邦幫忙

2023 iThome 鐵人賽

DAY 14
0
Software Development

從零開始!使用chatGPT製作Unity回合制卡牌遊戲系列 第 14

從零開始!使用chatGPT製作Unity回合制卡牌遊戲 Day 14 - Unity UI使用:Text與TextMeshPro

  • 分享至 

  • xImage
  •  

上一期的最後一張圖,有一行case竟然忘記break,真是太尷尬了。
沒事,這樣就沒人發現我註解也忘記改了。


回到今天的話題!

為了要讓我們的遊戲可以改變模式:從遊戲選單MainMenu進入遊玩狀態Playing,
我們需要按鈕來切換狀態。
「按鈕。」
「按鈕?」


按鈕是屬於什麼類型的物件?
其實就是使用者介面

「那很簡單直接一個Text來標示..」

不對!

看來今天的主題終於要出現了。
我們需要的是..

「TextMeshPro!」

「TextMeshPro?」
「TextMeshPro!」

這是什麼,怎麼從來都沒聽過?
好的,我們先問一個比較實際的問題。
「為什麼要用它?UI-Text不好用嗎?」

沒錯,相較於傳統的Text,TextMeshPro除了在效能上有優勢,功能上也現代許多。
這篇討論中能看出,對比傳統的Text,TextMeshPro有以下優點:

  1. 更多對齊模式
  2. 更多邊界自定義
  3. 更多字體自定義
  4. 更多字距、行內間距、段落間距調整
  5. 超過30種 Rich Text 格式支援
  6. Sprite字體等自定義字體圖片效果

需要更多資訊可以參考這個播放清單


「我們在效能、潛力等原因上,都傾向於選擇TextMeshPro了,希望他不要很難。」
對,關於這件事。

他原生不支持中文

所以要做一些字型的匯入才能正常顯示中文。

總之,我們今天先來建立TextMeshPro吧!

首先,一如繼往。

在Hierarchy面板右鍵,選擇UI-TextMeshPro。

https://ithelp.ithome.com.tw/upload/images/20230928/20163235Yy8izRy0Xo.png

然後突然就出現了一堆CanvasEventSystem,然後TextMeshPro被包在裡面。
別擔心,我們慢慢來。


Canvas就是我們的遊戲畫面

所以TextMeshPro在上面的位置就是我們實際會看到的位置。
https://ithelp.ithome.com.tw/upload/images/20230928/20163235oUGJTDSL5w.png

所以如果我們把Canvas裡面的

UI Scale Mode修改為Scale With Screen Size

將解析度修改為我們遊戲的解析度:1920*1080。

https://ithelp.ithome.com.tw/upload/images/20230928/20163235P8wx76LC9k.png

緊接著,

更改TextMeshPro的位置、大小、字型、顏色

https://ithelp.ithome.com.tw/upload/images/20230928/2016323588VvwFW5Hf.png

然後..
https://ithelp.ithome.com.tw/upload/images/20230928/201632356e92Ob8mOg.png

厲害吧?(其實還好..


之後我們將會講解Mac以及Windows如何在TextMeshPro使用中文,並使用額外的按鈕以及程式碼來改變TextMeshPro的文字內容。

再見啦!


上一篇
從零開始!使用chatGPT製作Unity回合制卡牌遊戲 Day 13 - 遊戲狀態的程式碼實作
下一篇
從零開始!使用chatGPT製作Unity回合制卡牌遊戲 Day 15 - TextMeshPro的字體匯入與中文:Font Asset Creator
系列文
從零開始!使用chatGPT製作Unity回合制卡牌遊戲30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言